const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

// 自定义插件
class MyPlugin {
  apply(compiler) {
    console.log('MyPlugin 启动')

    compiler.hooks.emit.tap('MyPlugin', compilation => {
      // compilation => 可以理解为此次打包的上下文
      // 遍历所有编译过的资源文件
      for (const name in compilation.assets) {
        // 打印资源文件的名称
        // console.log(name)

        // 打印资源文件的内容，通过资源文件的值的source方法获取
        // console.log(compilation.assets[name].source())

        // 判断是否是js文件
        if (name.endsWith('.js')) {
          // 获取内容
          const contents = compilation.assets[name].source()
          // 清除/*[*+]*/注释
          const withoutComments = contents.replace(/\/\*\*+\*\//g, '')
          // 覆盖编译内容
          compilation.assets[name] = {
            source: () => withoutComments,
            size: () => withoutComments.length,
          }
        }
      }
    })
  }
}

module.exports = {
  mode: 'none',
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
  },

  devServer: {
    // 配置开发服务器查找资源的额外路径，可接收字符串或数组
    contentBase: './public',

    // 配置API代理
    proxy: {
      // key 是需要代理的请求路径的前缀
      // value 是为这个前缀匹配的代理规则配置
      '/api': {
        // target 代理目标
        // http://localhost:8080/api/users -> https://api.github.com/api/users
        target: 'https://api.github.com',
        // 正确应该代理到https://api.github.com/users
        // 通过pathRewrite重写代理path路径，
        // path路径即location.pathname
        // https://api.github.com/api/users?a=123 的路径是 /api/users
        pathRewrite: {
          // key是正则匹配的路径字符串
          // value是要替换的内容
          '^/api': '',
        },

        // 不能使用 localhost 作为请求GitHub的 「host」
        changeOrigin: true,
      },
    },
  },

  // plugins 配置插件
  plugins: [
    // 默认清理webpack默认的输出路径dist
    new CleanWebpackPlugin(),

    // 默认将打包文件bundle.js注入到一个html文件中，并将html文件一起输出到目录
    // 默认生成 index.html
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      favicon: './public/favicon.ico',
      meta: {
        viewport: 'width=device-width',
      },
      template: './index.html',
    }),
    // 生成 about.html
    new HtmlWebpackPlugin({
      filename: 'about.html',
    }),

    // 在开发阶段通过配置静态资源路径代替拷贝文件

    // 拷贝文件 v6.x使用patterns 配置
    // new CopyWebpackPlugin({
    //   patterns: [
    //     // 'public/**'
    //     'public',
    //   ],
    // }),

    // 使用自定义插件
    new MyPlugin(),
  ],
}
